<template>
  <el-header style="font-size: 12px">
    <div class="logo" style="margin-left: 20px">韬睿知识库</div>
    <ul class="menu">
      <li><router-link to="/">首页</router-link></li>
      <li v-show="user.id"><router-link to="/admin/user">用户管理</router-link></li>
      <li v-show="user.id"><router-link to="/admin/ebook">电子书管理</router-link></li>
      <li v-show="user.id"><router-link to="/admin/category">分类管理</router-link></li>
      <li><router-link to="/">关于我们</router-link></li>
    </ul>
    <a class="login-menu" @click="showLoginDialog" v-show="!user.id">
      <span>登录</span>
    </a>
    <el-popconfirm
      confirmButtonText="确认"
      cancelButtonText="取消"
      icon="el-icon-info"
      iconColor="red"
      title="删除后不可恢复，确认删除?"
      @confirm="logout"
    >
      <template #reference>
        <el-button size="mini" type="danger" style="float:right;margin-left:15px" v-show="user.id">退出登录</el-button>
      </template>
    </el-popconfirm>

    <a class="login-menu" v-show="user.id">
      <span>您好：{{ user.name }}</span>
    </a>

    <el-dialog
      title="登录"
      :width="500"
      v-model="loginDialogVisible"
      :modal="false"
    >
      <el-form :model="loginUser" v-loading="loginDialogLoading">
        <el-form-item label="登录名" label-width="100px">
          <el-input v-model="loginUser.loginName"></el-input>
        </el-form-item>
        <el-form-item label="密  码" label-width="100px">
          <el-input type="password" v-model="loginUser.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="loginDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="login">确 认</el-button>
        </span>
      </template>
    </el-dialog>
  </el-header>
</template>
<script>
import axios from "axios";
import { defineComponent, ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
export default defineComponent({
  name: "the-header",
  setup() {
    const store = useStore();
    const user = computed(() => store.state.user);

    const loginUser = ref({
      loginName: "test",
      password: "test123",
    });

    const loginDialogVisible = ref(false);
    const loginDialogLoading = ref(false);

    const showLoginDialog = () => {
      loginDialogVisible.value = true;
    };

    //登录
    const login = () => {
      console.log("开始登录。。。");
      loginDialogLoading.value = true;
      loginUser.value.password = hexMd5(loginUser.value.password + KEY);
      axios.post("/user/login", loginUser.value).then((response) => {
        loginDialogLoading.value = false;
        const data = response.data;
        if (data.success) {
          loginDialogVisible.value = false;
          ElMessage.success({
            message: "登录成功！",
            type: "success",
          });
          store.commit("setUser",data.content);
        } else {
          ElMessage.error(data.message);
        }
      });
    };

     //退出登录
    const logout = () => {
      console.log("退出登录。。。");
      axios.get("/user/logout/"+user.value.token).then((response) => {
        const data = response.data;
        if (data.success) {
          ElMessage.success({
            message: "退出登录成功！",
            type: "success",
          });
          store.commit("setUser",{});
        } else {
          ElMessage.error(data.message);
        }
      });
    };

    return {
      loginUser,
      loginDialogVisible,
      loginDialogLoading,
      showLoginDialog,
      login,
      user,
      logout
    };
  },
});
</script>
<style scoped>
.el-header {
  padding-left: 0px;
  background-color: #b3c0d1;
  color: #333;
  line-height: 35px;
}
.logo {
  width: 120px;
  height: 31px;
  float: left;
  color: #fff;
  font-size: 18px;
  margin-top: 13px;
  margin-right: 30px;
}
.menu {
  text-align: left;
  line-height: 35px;
  font-size: 15px;
}
.menu li {
  width: 80px;
  text-align: center;
  float: left;
}

.menu li a {
  color: hsla(0, 0%, 100%, 0.65);
}

.menu li a:hover {
  color: white;
}

.login-menu {
  float: right;
  color: white;
  margin-left: 15px;
}
</style>